'use client';

import { useState } from 'react';
import { Article } from './Article';
import { DateInput } from './DateInput';
import { EbbinghausTable } from './EbbinghausTable';
import { PageTitle } from './PageTitle';
import { PrintButton } from './PrintButton';

export type PageData = {
  title: string;
  subtitle: string;
  data: string[];
};

export function EbbinghausPage({ title, subtitle, data }: PageData) {
  const [startDate, setStartDate] = useState(() => new Date());
  const [fillDate, setFillDate] = useState(false);

  return (
    <>
      <div className='noprint m-v-5'>
        <span>填充学习日期：</span>
        <label>
          <input type='checkbox' checked={fillDate} onChange={(e) => setFillDate(e.target.checked)} />
          <span>启用</span>
        </label>
      </div>

      {fillDate && (
        <div className='noprint m-v-5'>
          <span>开始学习日期：</span>
          <DateInput value={startDate} onChange={setStartDate} />
        </div>
      )}

      <div className='noprint m-v-5'>
        <PrintButton />
      </div>

      <EbbinghausTable
        data={data}
        renderTitle={() => <PageTitle title={title} subtitle={subtitle} />}
        renderContent={(r) => <Article text={r} />}
        startDate={fillDate ? startDate : null}
      />
    </>
  );
}
